<template>
  <div class="xbx blist">
    <dl class="blk" v-for="(item, index) in BandanList" :key="index">
      <dt class="top">
        <div class="cver">
          <img width="85" :src="item.coverImgUrl" alt="" />
        </div>
        <div class="tit">
          <a href="javascript:;">{{ item.name }}</a>
          <div class="btn">
            <a href="javascript:;" class="bo"></a>
            <a href="javascript:;" class="wen"></a>
          </div>
        </div>
      </dt>
      <dd>
        <ol>
          <li v-for="(item, index) in Banmusic" :key="index">
            <span>{{ index + 1 }}</span>
            <a href="javascript:;">{{ item.first }}</a>
            <div class="oper">
              <a href="javascript:;" class="a1"></a>
              <a href="javascript:;" class="a2"></a>
              <a href="javascript:;" class="a3"></a>
            </div>
          </li>
        </ol>
        <div class="more">
          <a href="javascript:;">查看全部 ></a>
        </div>
      </dd>
    </dl>
  </div>
</template>

<script>
import { BangdanApi } from "@/request/api";
export default {
  data() {
    return {
      // 榜单列表
      BandanList: [],
      // 榜单歌曲
      Banmusic: [],
    };
  },
  created() {
    BangdanApi().then((res) => {
      // console.log(res)
      if (res.data.code === 200) {
        this.BandanList = res.data.list.slice(0, 3);
        for (let i = 0; i < this.BandanList.length; i++) {
          this.Banmusic = this.BandanList[i].tracks;
        }
      }
      // console.log(this.BandanList);
      // console.log(this.Banmusic);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.blist {
  width: 685px;
  height: 472px;
  margin-top: 20px;
  padding-left: 1px;
  display: flex;
  position: relative;
  /* border: 1px solid #000; */
  background: url("../../assets/images/index_bill.png") no-repeat;
  a {
    color: #000;
  }
  .blk {
    width: 230px;
    .top {
      height: 100px;
      padding: 20px 0 0 19px;
      display: flex;
      .cver {
        width: 80px;
        height: 80px;
      }
      .tit {
        width: 116px;
        margin: 6px 0 0 10px;
        .btn {
          margin-top: 10px;
          display: flex;
          a {
            width: 22px;
            height: 22px;
            margin-right: 10px;
            &.bo {
              background: url("../../assets/images/index.png") no-repeat 0 0;
              background-position: -267px -205px;
            }
            &.wen {
              background: url("../../assets/images/index.png") no-repeat 0 0;
              background-position: -300px -205px;
            }
          }
        }
      }
    }
    dd {
      ol {
        margin-left: 50px;
        li {
          height: 32px;
          line-height: 32px;
          &:hover{
            a{
              text-decoration: underline;
            }
            .oper{
              display: block;
            }
          }
          span {
            float: left;
            width: 35px;
            height: 32px;
            margin-left: -35px;
            text-align: center;
            color: #666;
            font-size: 16px;
          }
          .oper {
            display: none;
            float: right;
            width: 82px;
            margin-top: 7px;
            a {
              float: left;
              width: 17px;
              height: 17px;
              margin-right: 10px;
              background: url("../../assets/images/index.png") no-repeat 0
                9999px;
              &.a1 {
                background-position: -267px -268px;
              }
              &.a2 {
                background: url("../../assets/images/icon.png") no-repeat;
                background-position: 0px -700px;
              }
              &.a3 {
                background-position: -297px -268px;
              }
            }
          }
        }
      }
      .more {
        position: absolute;
        bottom: 0px;
        clear: both;
        height: 32px;
        line-height: 32px;
        padding-left: 130px;
      }
    }
  }
}
</style>